<template>
    <div
        class="dashboard-container"
        name="Articles"
    >
        <div class="app-container">
            <el-card
                shadow="never"
                style="overflow-x: hidden;"
            >
                <!-- 搜索 -->
                <el-form
                    class="demo-form-inline"
                    :inline="true"
                    style="overflow-y:hidden; min-width:440px"
                >
                    <el-button
                        type="success"
                        style="float: right"
                        @click="newSkill"
                    >新增技巧</el-button>

                    <el-form-item
                        label="关键字"
                        style="margin-right:50px"
                    >
                        <el-input
                            placeholder="根据文章标题搜索"
                            v-model="requestParameters.keyword"
                            clearable
                            type="text"
                            autocomplete="no"
                            style="width: 220px;"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select
                            v-model="requestParameters.state"
                            clearable
                            placeholder="请选择"
                            style="width: 235px;"
                        >
                            <el-option
                                v-for="item in search.state.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="empty">清除</el-button>
                        <el-button
                            type="primary"
                            @click="getSearch"
                        >搜索</el-button>
                    </el-form-item>
                </el-form>
                <!-- 数据记录 -->
                <el-alert
                    v-if="alertText !== ''"
                    :title="alertText"
                    type="info"
                    class="alert"
                    :closable="false"
                    show-icon
                ></el-alert>
                <!-- end -->
                <!-- 数据列表 -->
                <el-table
                    v-loading="listLoading"
                    element-loading-text="给我一点时间"
                    fit
                    highlight-current-row
                    :data="DataList"
                    header-align="center"
                    style="width: 100%;overflow-y:hidden; min-width:960px"
                >
                    <el-table-column
                        label="序号"
                        type='index'
                        width="50px"
                    >
                    </el-table-column>
                    <el-table-column
                        label="文章标题"
                        min-width="180px"
                    >
                        <template v-slot='{row}'>
                            {{row.title}}
                            <i
                                class="el-icon-film"
                                style="color:#0000ff"
                                v-if="row.videoURL"
                                @click="videoPlay(row)"
                            ></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="visits"
                        label="阅读数"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="录入人"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="录入时间"
                        min-width="120px"
                    >
                        <template v-slot="{row}">
                            {{row.createTime|parseTimeByString}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template v-slot='{row}'>
                            {{row.state===0?'已启用':'已禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        min-width="140px"
                    >
                        <template v-slot='{row}'>
                            <el-button
                                type="text"
                                @click="previewSkill(row)"
                            >预览</el-button>
                            <el-button
                                type="text"
                                @click="reviseState(row)"
                            >
                                {{row.state===1?'启用':'禁用'}}
                            </el-button>
                            <el-button
                                type="text"
                                @click="reviseSkill(row)"
                                :disabled='row.state===0?true:false'
                            >修改</el-button>
                            <el-button
                                type="text"
                                @click="remove(row)"
                                :disabled='row.state===0?true:false'
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- end -->
                <!-- 分页 -->
                <div class="pagination">
                    <div class="pages">
                        <el-pagination
                            style="text-align: right;margin-right:160px"
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="Number(requestParameters.page)"
                            :total="Number(total)"
                            :page-size="Number(requestParameters.pagesize)"
                            :page-sizes="[10,20,30,50]"
                            layout="sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </div>
                </div>
                <!-- end -->
                <!-- 新增与修改弹层子组件 -->
                <DialogAdd
                    ref="addArticles"
                    :subassembly='subassembly'
                    v-on:newArticle="newArticle"
                    v-on:confirm="confirm"
                    v-on:cancel="cancel"
                ></DialogAdd>
                <!-- end -->
                <!-- 预览弹层子组件 -->
                <dialog-preview
                    ref="previewArticles"
                    :preview='preview'
                    v-on:previewCallback="previewCallback"
                >
                </dialog-preview>
                <!-- end -->
                <!-- 视频播放组件 -->
                <video-play
                    v-if="video.state"
                    :video="video"
                    v-on:videoClosure="videoClosure"
                ></video-play>
                <!-- end -->
            </el-card>
        </div>
    </div>
</template>

<script>
import DialogAdd from './../components/articles-add.vue'
import DialogPreview from './../components/articles-preview.vue'
import * as req from '@/api/hmmm/articles.js'
import videoPlay from '../components/video.vue'
export default {
    // 作用域name---------------------------------------------------
    name: 'Articles',
    // 注册组件-----------------------------------------------------
    components: {
        DialogAdd,
        DialogPreview,
        videoPlay,
    },
    // 状态数据-----------------------------------------------------
    data () {
        return {
            //添加修改弹层隐藏显示控制参数
            subassembly: {
                dialogFormVisible: false,//隐藏显示
                sublayerType: '',//组件标题
                articleTitle: '',//文章标题
                articleContent: '',//文章内容
                videoAddress: '',//视频地址
                row: null//目标项
            },
            //预览弹层隐藏显示控制参数
            preview: {
                dialogFormVisible: false,//隐藏显示
                sublayerType: '',//组件标题
                row: {}//目标项数据
            },
            //是否在加载数据中
            listLoading: true,
            //总条目数
            total: null,
            //数据记录隐藏显示与显示内容参数
            alertText: '',
            //分页栏初始配置参数
            requestParameters: {
                page: 1,
                pagesize: 10,
                state: "",
                keyword: "",
            },
            //搜索框参数
            search: {
                state: {
                    options: [{
                        value: 0,
                        label: '启用'
                    }, {
                        value: 1,
                        label: '禁用'
                    }],
                }
            },
            //列表参数数据
            DataList: [],
            //当前播放视频地址
            video: {
                Url: null,
                state: false
            }
        }
    },
    // 组件方法-----------------------------------------------------
    methods: {
        //获取文章列表数据
        async getArticleList () {
            try {
                this.listLoading = true
                const getReq = {}
                for (const key in this.requestParameters) {
                    if (this.requestParameters[key] !== '') {
                        getReq[key] = this.requestParameters[key]
                    }
                }
                const { data, status } = await req.list(getReq)
                if (status !== 200) return this.$message.error('获取文章列表失败')
                this.DataList = data.items
                this.alertText = `数据一共 ${data.counts} 条`
                this.total = data.counts
                this.listLoading = false
                this.$message.success('获取文章列表成功')
            } catch (error) {
                console.error(error);
            }
        },
        // 每页显示信息条数
        handleSizeChange (val) {
            this.requestParameters.pagesize = val
            if (this.requestParameters.page === 1) {
                this.getArticleList()
            }
        },
        // 进入某一页
        handleCurrentChange (val) {
            this.requestParameters.page = val
            this.getArticleList()
        },
        //清空搜索关键字和状态内容
        empty () {
            this.requestParameters.state = ''
            this.requestParameters.keyword = ''
            this.requestParameters.page=1
            this.getArticleList()
        },
        //按条件搜索
        getSearch () {
            this.requestParameters.page = 1
            this.getArticleList()
        },
        //文章删除
        async remove (row) {
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const { data, status } = await req.remove(row)
                    if (status !== 200) return this.$message({ type: 'info', message: '删除失败' });
                    this.getArticleList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                } catch (error) {
                    console.log(error);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //新增技巧文章
        async newSkill () {
            await this.reset()
            this.subassembly.dialogFormVisible = true//隐藏显示
            this.subassembly.sublayerType = '新增'//组件标题
        },
        //修改技巧文章
        async reviseSkill (row) {
            await this.reset()
            this.subassembly.dialogFormVisible = true
            this.subassembly.sublayerType = '修改'
            this.subassembly.articleTitle = row.title//文章标题
            this.subassembly.articleContent = row.articleBody//文章内容
            this.subassembly.videoAddress = row.videoURL//视频地址
            this.subassembly.row = row//所选数据
        },
        //预览技巧文章
        async previewSkill (row) {
            try {
                this.preview.dialogFormVisible = true
                this.preview.sublayerType = '预览'
                this.preview.row = row
            } catch (error) {
                console.log(error);
            }
        },
        //子传父获取Dialog富文本内容
        newArticle (text) {
            this.subassembly.articleContent = text
        },
        //子传父方式子组件确认后回调
        async confirm (row) {
            if (this.subassembly.sublayerType === '新增') {
                try {
                    const { data, status } = await req.add({
                        articleBody: this.subassembly.articleContent,
                        id: null,
                        title: this.subassembly.articleTitle,
                        videoURL: this.subassembly.videoAddress
                    })
                    if (status !== 200) return this.$message({ type: 'info', message: '新增失败' });
                    this.getArticleList()
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                } catch (error) {
                    console.log(error);
                }
            } else if (this.subassembly.sublayerType === '修改') {
                try {
                    const { data, status } = await req.update({
                        articleBody: this.subassembly.articleContent,
                        id: row.id,
                        title: this.subassembly.articleTitle,
                        videoURL: this.subassembly.videoAddress
                    })
                    if (status !== 200) return this.$message({ type: 'info', message: '修改失败' });
                    this.getArticleList()
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                } catch (error) {
                    console.log(error);
                }
            }
            this.reset()
            // console.log('确认');
        },
        //子传父方式子组件取消后回调
        cancel () {
            this.reset()
            // console.log('取消');
        },
        //重置父传子数据
        reset () {
            this.subassembly.dialogFormVisible = false//隐藏显示
            this.subassembly.sublayerType = ''//组件标题
            this.subassembly.articleTitle = ''//文章标题
            this.subassembly.articleContent = ''//文章内容
            this.subassembly.videoAddress = ''//视频地址
            this.subassembly.row = ''//目标项
            this.preview.dialogFormVisible = false//隐藏显示
            this.preview.sublayerType = ''//组件标题
            this.preview.row = ''//目标项
        },
        //修改数据状态
        async reviseState (row) {
            try {
                const { data, status } = await req.changeState({
                    id: row.id,
                    state: row.state === 0 ? 1 : 0
                })
                if (status !== 200) return this.$message({ type: 'info', message: `${row.state === 1 ? '启用' : '禁用'}失败` });
                // this.getArticleList()
                if (row.state === 0) {
                    row.state = 1
                } else {
                    row.state = 0
                }
                this.$message({
                    type: 'success',
                    message: `${row.state === 0 ? '启用' : '禁用'}成功`
                });
            } catch (error) {
                console.log(error);
            }
        },
        //preview组件回调函数
        previewCallback () {
            this.reset()
        },
        //打开视频组件
        videoPlay (row) {
            this.video.state = true
            this.video.Url = row.videoURL
        },
        // 关闭视频组件
        videoClosure () {
            this.video.state = false
            this.video.Url = null
        },

    },
    // 模板生成虚拟DOM并挂载结束-------------------------------------
    mounted () {
        this.getArticleList()
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
    margin: 0px;
}
.pagination {
    margin-top: 10px;
}
</style>
